<!DOCTYPE html>
<html>
<head>
    <title>Canvas Point-Select Captcha with Selection Effect</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="captchaCanvas" width="400" height="100"></canvas>
    <p id="feedback"></p>
    <script>
        const canvas = document.getElementById('captchaCanvas');
        const ctx = canvas.getContext('2d');
        const feedback = document.getElementById('feedback');
        let selectionTimeout;

        // 绘制验证码函数保持不变...
		
        // 生成并绘制验证码
        function drawCaptcha() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const captchaText = '快递费借'; // 这里应为生成的随机验证码文本
            const fontSize = 20;
            ctx.font = `${fontSize}px Arial`;
            
            // 绘制验证码字符
            for (let i = 0; i < captchaText.length; i++) {
                const x = i * fontSize + fontSize + Math.random() / 2;
                const y = fontSize + Math.random() * 50; // 添加一点垂直偏移
                ctx.fillText(captchaText[i], x, y);
                
                // 你可以在这里添加坐标点生成逻辑和后续的点选验证逻辑
            }
        }

        // 添加点击事件监听器并包含图标绘制逻辑
        canvas.addEventListener('click', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            // 绘制点选图标效果
            drawSelectionMarker(x, y);

           

            // 示例反馈信息，实际应用中需要验证点击位置的有效性
            feedback.textContent = `Clicked at (${x}, ${y})`; 
        });

        // 绘制点选图标效果的函数
        function drawSelectionMarker(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制一个半径为5px的圆
            ctx.fillStyle = '#0f0'; // 绿色表示正确点击位置
            ctx.fill();
            ctx.closePath();
        }

        // 初始化绘制验证码
        drawCaptcha();
    </script>
</body>
</html>